<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;">
      <div class="handle-box" slot="handleContent">
        <!-- <div class="handle-btn">
          <a-button class="common-btn" >关联用户</a-button>
        </div> -->
        <!-- <div class="handle-btn">
          <a-button class="common-btn" @click="submitProMessage">确定</a-button>
        </div>
        <div class="handle-btn">
          <a-button @click="cancel" class="common-btn">取消</a-button>
        </div> -->
      </div>
    </breadcrumb>
    <a-card class="card" title="报警基本信息" :bordered="false">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="报警编号" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.code', {initialValue: currentPro.warncode, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="报警时间" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.time', {initialValue: currentPro.occurrenceTime, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="报警级别" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-select disabled v-decorator="['queryParam.type', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 270px;">
                <a-select-option value="1">A</a-select-option>
                <a-select-option value="2">B</a-select-option>
                <a-select-option value="3">C</a-select-option>
                <a-select-option value="4">D</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="处理优先级" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-select disabled v-decorator="['queryParam.type', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 270px;">
                <a-select-option value="1">1</a-select-option>
                <a-select-option value="2">2</a-select-option>
                <a-select-option value="3">3</a-select-option>
                <a-select-option value="4">4</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="20" :md="12" :sm="24">
            <div class="spec-row">
              <a-form-item class="spec-item" label="报警地点" :labelCol="{lg: {span: 4}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <div style="display:flex;">
                  <a-form-item>
                    <a-select disabled v-decorator="['queryParam.provice', {initialValue: '山西省', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="山西省">山西省</a-select-option>
                      <a-select-option value="山东省">山东省</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select disabled v-decorator="['queryParam.municipal', {initialValue: '太原市', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="市">市</a-select-option>
                      <a-select-option value="太原市">太原市</a-select-option>
                      <a-select-option value="未知市">未知市</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select disabled v-decorator="['queryParam.county', {initialValue: '小店区', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="县（区）">县（区）</a-select-option>
                      <a-select-option value="小店区">小店区</a-select-option>
                      <a-select-option value="未知区">未知区</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-input disabled v-decorator="['queryParam.company', {initialValue: currentPro.alarmPoints, rules: [{required: false, message: ''}]}]" placeholder="详细地址" style="width: 290px;"/>
                  </a-form-item>
                </div>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="currentPro.identityType === '2'">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="企事业单位名称" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.company', {initialValue: currentPro.user, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="社会统一信用代码" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number disabled v-decorator="['queryParam.companyCode', {initialValue: currentPro.companyCode, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="currentPro.identityType === '1'">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="户主姓名" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.owner', {initialValue: currentPro.user, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="身份证号码" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number disabled v-decorator="['queryParam.ownerCode', {initialValue: currentPro.ownerCode, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系人" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.user', {initialValue: currentPro.confirmingPerson, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系电话" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number disabled v-decorator="['queryParam.tel', {initialValue: currentPro.telephone, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="报警事项" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input disabled v-decorator="['queryParam.matters', {initialValue: currentPro.alarmContent, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="诊断结果" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="isShow" v-decorator="['queryParam.res', {initialValue: currentPro.confirme, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="详细描述" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 20}, sm: {span: 17} }">
              <a-textarea rows="4" :disabled="isShow" v-decorator="['queryParam.matters', {initialValue: currentPro.matters, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 730px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24" v-if="isShowOrder">
            <a-button class="common-btn" @click="seeRepairOrder">查看维修单</a-button>
          </a-col>
        </a-row>
        <a-row v-if="isShowBotton">
          <div style="text-align:center;">
            <a-button class="common-btn" @click="createRepairOrder" v-if="isShowOrderCreate">创建维修单</a-button>
            <a-button class="common-btn" @click="submitProMessage" style="margin-left:10px;">确定</a-button>
            <a-button @click="cancel" class="common-btn" style="margin-left:10px;">取消</a-button>
          </div>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import Breadcrumb from '@/components/tools/Breadcrumb'
import Cascader from 'ant-design-vue/lib/cascader'
export default {
  name: 'AddProjects',
  components: {
    GlobalHeader,
    Breadcrumb,
    'a-cascader': Cascader
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    statusCode: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      name: '',
      breadList: [],
      code: '',
      isShowBotton: true,
      isShow: false,
      isShowOrderCreate: true,
      isShowOrder: false,
      queryParam: {},
      form: this.$form.createForm(this),
      currentType: '', // 当前页面所属
      currentPro: {}, // 当前产品详情
      headers: {
        authorization: 'authorization-text'
      }
    }
  },
  created () {
    console.log('组建传值', this.type, this.statusCode)
    this.currentType = this.$route.query.type
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    this.getBreadCrumb()
    this.code = this.$route.query.type !== 'create' ? '项目编号：' + this.currentPro.proCode : '项目编号：' + 'SX_TY_001'
    console.log('当前详情', this.currentType, this.currentPro)
    if (this.currentType === 'detail') {
      this.isShowOrderCreate = false
      this.isShow = true
      this.isShowOrder = true
      this.isShowBotton = false
    } else {
      this.isShow = false
      this.isShowBotton = true
    }
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      switch (this.$route.query.type) {
        case 'detail':
          this.breadList[2].meta.title = '报警详情'
          break
        case 'modify':
          this.breadList[2].meta.title = '维修'
          break
        default:
          this.breadList[2].meta.title = '报警确认'
          break
      }
    },
    cancel () {
      const that = this
      this.$confirm({
        title: '是否确定取消，取消后数据将清空',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已取消'
          })
        }
      })
    },
    createRepairOrder () {
      const that = this
      this.$confirm({
        title: '是否确定创建维修工单？',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '维修工单创建成功'
          })
          that.isShowOrder = true
          that.isShowOrderCreate = false
        }
      })
    },
    seeRepairOrder () {
      this.$success({
        title: '维修工单已下载，请本地打开查看'
      })
    },
    submitProMessage () {
      const that = this
      this.$confirm({
        title: '确认提交吗',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已提交'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.spec-row {
  margin-left: -16px;
}
.spec-item {
  margin-bottom: 0px;
}
.spec-card {
  height: 56px;
}
</style>
